<template>
    <div v-if="!isCollapse">
      <img src="/src/assets/logo.png" width="28" height="28" style="float: left;margin-left: 10px;margin-right: 10px;margin-top:-5px;"/>
      <h4 style="color: #ecf5ff;" >EPLUS-Admin</h4>
    </div>
    <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        :collapse-transition="false"
        active-text-color="#FFF"
        background-color="#001529"
        text-color="#FFF"
        :router="true"
    >
      <MenuItem :menu-list="menuList" />
    </el-menu>
</template>

<script lang="ts" setup>
  
  import { defineComponent, reactive, toRefs, onMounted, onActivated, ref, computed } from "vue";
  import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
  } from '@element-plus/icons-vue'
  import MenuItem from './menuItem.vue';

defineProps({
    menuList: {
        type: Array,
        required: true
    }
});

const isCollapse = ref(false);
const toggleMenu = () => {
    isCollapse.value = !isCollapse.value;
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

defineExpose({
  toggleMenu
});

</script>

<style scoped>

    .el-menu-item-group {
        border: 0;
    }

    .el-menu-item:hover{  
      outline: 0 !important;  
      color: #409EFF !important;
      background-color: aliceblue;
    }  
</style>